<template>  
  <div class="todo-item">  
    <input type="checkbox" :checked="completed" @change="toggleCompletion" />  
    <span>{{ title }}</span>  
    <button @click="removeTodo">删除</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'TodoItem',  
  props: {  
    title: {  
      type: String,  
      required: true  
    },  
    completed: {  
      type: Boolean,  
      default: false  
    }  
  },  
  methods: {  
    toggleCompletion() {  
      this.$emit('update:completed', !this.completed);  
    },  
    removeTodo() {  
      this.$emit('remove-todo');  
    }  
  }  
}  
</script>  
